<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单事件</title>
</head>
<body>
   <form>
    <p>
        <label for="uname">用户名:</label>
        <input type="text"id="uname"name="username"value="小红">
    </p>
    <p>
        性别；
        <label for="male">
            男；
        <input name="gender"type="radio"id="male"value="男">
        </label>
        <label for="female">
            女；
            <input name="gender"type="radio"id="female"value="女">
        </label>
    </p>
    <p>
        <div>班级选择：</div>
        <select name="classes" id="classes">
            <option value="软件开发1班"软件开发1班></option>
            <option value="软件开发2班"软件开发2班></option>
            <option value="软件开发3班"软件开发3班></option>
            <option value="软件开发4班"软件开发4班></option>
        </select>
    </p>
   </form> 
</body>
<script src="./jquery.js"></script>
<script>
    $("#uname").focus(function(){
        console.log($(this).val());//输出默认值
    })
    $("#uname").focus(function(){//用户离开uname输入框时触发
        alert('你输入的账户是:${$(this).val()}')
    })
    $("#uname").select(function(){//选中输入框内容生效
        $(this).css("background","red")
    })
    //使用属性选择器选中name是gender的元素
    $("[name=gender]").change(function(){
        console.log( $(this).val);
    })
    $("#classes").change(function(){
        alert( $(this).val());
    })
</script>
</html>